<template>
  <el-dialog v-model="dialogVisible" :title="editFlag ? '编辑智能生成农事计划' : '新增智能生成农事计划'" width="30%" custom-class="diyclass">
    <div class="mcontent">
      <div class="mchild">
        <div class="label">作物类型:</div>
        <el-select v-model="form.value.type" class="m-2" placeholder="选择作物类型">
          <el-option label="玉米" value="玉米" />
          <el-option label="西瓜" value="西瓜" />
          <el-option label="向日葵" value="向日葵" />
          <el-option label="辣椒" value="辣椒" />
          <el-option label="小麦" value="小麦" />
          <el-option label="苹果" value="苹果" />
          <el-option label="大米" value="大米" />
        </el-select>
      </div>
      <div class="mchild">
        <div class="label">作物品种:</div>
        <el-select v-model="form.value.crop" class="m-2" placeholder="选择作物品种">
          <el-option label="新玉69" value="新玉69" />
          <el-option label="品种2" value="品种2" />
          <el-option label="品种3" value="品种3" />
          <el-option label="品种4" value="品种4" />
          <el-option label="品种5" value="品种5" />
          <el-option label="品种6" value="品种6" />
          <el-option label="品种7" value="品种7" />
        </el-select>
      </div>
      <div class="mchild">
        <div class="label">目标产量:</div>
        <el-input v-model="form.value.yield" placeholder="请输入" clearable>
          <template #suffix>
            kg/亩
          </template>
        </el-input>
      </div>
      <div class="mchild">
        <div class="label">土壤质地:</div>
        <el-select v-model="form.value.soilTexture" class="m-2" placeholder="选择土壤质地">
          <el-option label="沙土" value="沙土" />
          <el-option label="壤土" value="壤土" />
          <el-option label="粘土" value="粘土" />
        </el-select>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button :disabled="!overFlag" @click="submit">智能生成</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { computed, defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import { post, get } from '@/public/request/api'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
export default defineComponent({
  components: {

  },

  setup(props, { emit }) {
    const state = reactive(props);
    //变量
    let dialogVisible = ref(false)
    let editFlag = ref(false)
    let form = reactive({
      value: {
        type: '',
        yield: '',
        crop: '',
        soilTexture: '',
      }
    })

    let overFlag = computed({
      get() {
        return form.value.type && form.value.yield && form.value.crop
          && form.value.soilTexture
      },
      set(value) {
      }
    })
    // 生命周期
    onMounted(() => {
      //
    });

    onUnmounted(() => {
      //
    });

    //methods
    function init(val) {
      console.log('init!', val)
      form.value = val
    }
    function submit() {
      // if (!editFlag.value) {
      //   post('/farmResource/add', form.value).then(res => {
      //     if (res.code == 200) {
      //       ElMessage({
      //         message: '新增成功',
      //         type: 'success',
      //       })
      //       emit('getList')
      //       dialogVisible.value = false
      //       form.value = {
      //         type: '',
      //         yield: '',
      //         crop: '',
      //         soilTexture: '',
      //       }
      //     }
      //   }).catch(err => {
      //     ElMessage({
      //       message: err.message,
      //       type: 'error',
      //     })
      //   })
      // } else {
      //   post('/farmResource/edit', form.value).then(res => {
      //     if (res.code == 200) {
      //       ElMessage({
      //         message: '编辑成功',
      //         type: 'success',
      //       })
      //       emit('getList')
      //       dialogVisible.value = false
      //       form.value = {
      //         type: '',
      //         yield: '',
      //         crop: '',
      //         soilTexture: '',
      //       }
      //     }
      //   }).catch(err => {
      //     ElMessage({
      //       message: err.message,
      //       type: 'error',
      //     })
      //   })
      // }
      emit('gotoAddPlan',form.value)
      dialogVisible.value = false
    }
    // return
    return {
      init,
      dialogVisible,
      editFlag,
      form,
      submit,
      overFlag
    };
  },
});
</script>

<style lang="scss">
.setwrap {

  .el-table th.el-table__cell,
  .el-table .el-table__cell,
  .el-table tr,
  .el-table--fit {
    background: transparent !important;
    color: #fff !important;
  }

  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important
  }

  .el-pagination.is-background .el-pager li {
    background: transparent !important;
    color: #fff !important;
  }

  .el-pagination.is-background .btn-next {
    background: none !important;
  }

  .btn-prev {
    background: none !important;
  }

  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    width: 200px;
    border-radius: 200px;
    border: none !important;
    box-shadow: none;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.setwrap {

  .btn3 {
    width: 100px !important;
    margin-left: 10px;
  }

  .btn7 {
    width: 77px !important;
  }

  .cost {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    font-size: 20px;

    span {
      font-weight: bold;
      font-size: 25px;
      margin-left: 10px;
    }
  }

  .fy {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .total {
      color: rgba(255, 255, 255, 0.60);
      font-size: 10px;

      span {
        font-size: 20px;
      }
    }

  }

  .table {
    margin-top: 20px;
  }

  .btnwrap {
    display: flex;
    align-items: center;

    .btntext {
      color: rgba(49, 127, 245, 1);
      cursor: pointer;
    }

    .delete {
      color: rgba(245, 98, 98, 1) !important;
      margin-left: 15px;
    }
  }

  .titlecommon2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn2 {
    width: 70px;
    box-sizing: border-box;
    padding: 5px 10px !important;
    margin-top: 20px;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(9, 127, 229, 1);
    font-size: 14px;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
  }

  .el-select {
    width: 100%;
  }
}</style>

